<template>
  <div id="app">
    <div class="loading" v-if="isLoading">
      <img
        src="./assets/public/loading.gif"
        alt="图片加载失败"
      >
      <p>加载中...</p>
    </div>
    <div class="warning" v-else-if="!isLoading && runEnv === 1">
      <img
        src="./assets/public/warning.png"
        alt="图片加载失败"
        srcset=""
      >
      <p class="errorColor">本地调试请在微信开发者工具中打开</p>
      <ul>
        <li>1.微信开发者工具左上角-->微信开发者工具</li>
        <li>2.更换开发模式-->公众号网页调试</li>
        <li>
          <span>3.输入</span>
          <van-button type="primary" size="mini" v-copy="open_url">复制</van-button><br>
          <span>{{open_url}}</span><br>
          <span class="errorColor">务必是该公众号的开发人员并且关注了公众号</span>
        </li>
      </ul>
    </div>
    <div class="warning" v-else-if="!isLoading && runEnv === 2">
      <img
        src="./assets/public/warning.png"
        alt="图片加载失败"
        srcset=""
      >
      <p class="errorColor">请在微信中打开</p>
    </div>
    <div class="warning" v-else-if="!isLoading && runEnv === 4">
      <img
        src="./assets/public/warning.png"
        alt="图片加载失败"
        srcset=""
      >
      <p class="errorColor">加载失败，请刷新或退出重试</p>
    </div>
    <router-view v-else-if="(!isLoading && runEnv === 0) || (!isLoading && runEnv === 3)" />
  </div>
</template>

<script>
import wx from '@/utils/wx'
import os from 'os'
import { getWxToekn,getWxUserInfo } from '@/api/public'
export default {
  name: 'App',
  data() {
    return {
      // 微信配置
      wxConfig:{
        appid: 'wx7033cc4c4c9ad7a3',
        AppSecret: 'a5a4ecea315bb10336aa851e9b1bf817',
        // 本地的时候需要netapp映射一下，具体可百度
        redirect_url: process.env.NODE_ENV === 'development' ? 'http://yewnmc.natappfree.cc' : os.hostname(),
        // 应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息）
        scope: 'snsapi_userinfo',
        // 重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节
        state: '0',
        // 获取code
        code: this.$func.getUrlParam("code")
      },
      // 微信的url
      open_url:'',
      // 是否加载完毕
      isLoading: true,
      // 0:本地，开发者工具环境  1:本地，浏览器环境  2:线上，浏览器环境 3:线上，微信环境 4:线上或本地(开发者工具环境)->但是加载wx-sdk失败了
      runEnv: -1,
    }
  },
  mounted() {
    // 需要微信回调code的url
    this.open_url = 
    'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.wxConfig.appid +
    '&redirect_uri=' + this.wxConfig.redirect_url +
    '&response_type=code' +
    '&scope=' + this.wxConfig.scope +
    '&state=' + this.wxConfig.state +
    '#wechat_redirect'
    // 微信环境准备
    wx(this.wxConfig,this.open_url).then((obj) => {
      this.runEnv = obj.env
      // 获取token
      getWxToekn({
        appid:this.wxConfig.appid,
        secret:this.wxConfig.AppSecret,
        code:this.wxConfig.code,
        grant_type:'authorization_code'
      }).then(res=>{
        this.$store.commit('user/wxUserAc',res)
        // 获取用户信息
        getWxUserInfo({openid:res.openid,access_token:res.access_token}).then(res2=>{
          this.isLoading = false
          this.$store.commit('user/wxUser',res2)
        })
      })
    }).catch((obj) => {
      this.isLoading = false
      this.runEnv = obj.env
      this.$notify({ type: 'danger', message: obj.msg })
    })
  },
  methods: {
  }
}
</script>

<style lang="css" scoped>
#app {
  width: 92%;
  padding: 0 4%;
  margin-top: 40px;
  word-wrap:break-word; 
  word-break:break-all; 
}
#app .warning > img {
  display: block;
  margin: 0 auto;
}
.errorColor {
  color: #ff4a4a;
}
#app .warning > p {
  text-align: center;
  font-size: 16px;
  margin-top: 30px;
}
#app .warning > ul > li {
  margin: 5% 0;
}
#app .warning > ul > li > span.errorColor {
  font-size: 14px;
}
#app .loading {
  width: 100%;
}
#app .loading > img {
  width: 100%;
  height: 100%;
}
#app .loading > p {
  font-size: 16px;
  text-align: center;
  font-weight: 600;
  padding: 0;
  margin: 0;
}
</style>
